let mask = document.querySelector('.mask');
let smallBox = document.querySelector('.smallBox');
let bigBox = document.querySelector('.bigBox');

//给小盒子添加事件，移入和移出
//移入：浮动的box和和bigBox显示
smallBox.onmouseover = function() {
        mask.style.display = "block";
        bigBox.style.display = "block";
    }
    //移除：浮动的box和bigBox隐藏
smallBox.onmouseout = function() {
    mask.style.display = "none";
    bigBox.style.display = "none";
}

document.addEventListener('mousemove', function(e) {
    // console.log(123);
    // console.log(e.clientX, e.clientY);

    let X = e.clientX - mask.offsetWidth / 2 - 50;
    let Y = e.clientY - mask.offsetHeight / 2 - 50;

    if (X >= 200) {
        X = 200
    } else if (X < 0) {
        X = 0
    };
    if (Y >= 200) {
        Y = 200
    } else if (Y <= 0) {
        Y = 0
    }
    mask.style.transform = `translate(${X}px,${Y}px)`
})